<template>
  <div class="chicangcontainer">
    <div class="toubu">
      <div class="dabokl" style="margin-top:0.05rem">
        <div class="sert">
                <span style="margin-left: -30px;" v-for="(item, index) in chicangList" :key="index" @click="chicangidx = index"
                      :class="chicangidx == index ? 'sdpl' : ''">{{ item.name }}</span>
          <a :style="chicangidx == 0 ? 'left: 0.1rem;' : chicangidx == 1 ?'left: 2.34rem;':'left: 4.54rem;'"></a>
        </div>
        <div class="bnm"></div>
      </div>
      <div class="tl"></div>
      <a class="tr" @click="getsearch"></a>
    </div>

    <div class="chicanglistmain">

      <van-list v-model="loading" :finished="finished" :finished-text="$t('hj43')"
                v-show="chicangidx === 0" @load="onLoad" :immediate-check="immediate">
        <div class="cichang" v-for="(item,index) in tabsPositionNumArr" :key="item.buyOrderId">
          <div class="dingbu">
            <div class="dl">
              <h6>{{ item.stockName ? item.stockName : item.indexName }}</h6>
              <p>
                <span v-show="(item.stockGid.indexOf('sz')>=0)">深</span>
                <span class="sh" v-show="(item.stockGid.indexOf('sh')>=0)">沪</span>
                <span class="bj" v-show="(item.stockGid.indexOf('bj')>=0)">北</span>
                <a class="">{{ item.stockGid }}</a>
              </p>
            </div>
            <div class="dr" v-if="chicangidx == 0" @click="getpingcang(item.positionSn)"> 平仓</div>
          </div>
          <div class="fudo" v-if="chicangidx == 0">
            <h6> 最新 <span class="red">{{ item.now_price }}</span></h6>
            <p>{{ item.buyOrderTime | gettime }}</p>
          </div>
          <div class="fudo" v-else>
            <h6> 卖出时间 </h6>
            <p>2022-12-03 13:21</p>
          </div>
          <div class="fudong redbg">
            <div class="kuij">
              <p><span>浮动盈亏：</span><a class="red">{{ item.profitAndLose }}</a></p>
              <p><span>总盈亏：</span><a class="red">{{ item.allProfitAndLose }}</a></p>
            </div>
          </div>
          <div class="plkm">
            <p><span>买入价格</span><a class="red">{{ item.buyOrderPrice }}/股</a></p>
            <p><span>数量</span><a class="red">{{ item.orderNum }}</a></p>
            <p><span>买入手续费</span><a class="red">{{ item.orderFee }}</a></p>
            <!-- <p><span>市值</span><a class="red">{{ item.orderTotalPrice }}</a></p> -->
            <p><span>市值</span><a class="red">{{ item.orderTotalPrice }}</a></p>
            <p v-if="chicangidx == 1"><span>买入价格</span><a class="red">5.49/股</a></p>
            <p v-if="chicangidx == 1"><span>留仓费</span><a class="red">49959.00</a></p>
          </div>
        </div>
      </van-list>
      <!-- 挂单 -->
      <van-list v-model="loadingss" :finished="finishedss" :finished-text="$t('hj43')"
                v-show="chicangidx === 1 " :immediate-check="immediate">

                  <!-- <div class="tabs_o_items" v-for="(item, index) in tabsOrderList" :key="item.id">
                    <div class="tabs_o_title">
                      <div>
                        <span class="title">{{ item.stockName ? item.stockName : item.indexName }}</span>
                        <div class="bt">
                          <span>{{ item.stockGid }}</span>
                        </div>
                        <span class="buy_to_sell" :class="item.buyType == 1 ? 'maichu' : 'mairu'">{{
                          item.buyType == 1 ? $t('hj84') : $t('hj301')
                        }}</span>
                        <span class="buy_to_sell" :class="item.status == 1 ? 'mairu' : 'maichu'">{{
                          item.status == 1 ? $t('hj254') : $t('hj255')
                        }}</span>
                        <span class="multiple">{{ item.lever }}X</span>
                        <span class="nums">{{ item.buyNum / 100 + $t('hj117') }}</span>
                      </div>

                      <div class="right_btn pingbtn" @click="gdClose(item)" v-if="item.status != 1">
                        <span style="margin-right: 0;">{{ $t('hj126') }}</span>
                      </div>
                    </div>
                    <div class="center_price">
                      <div class="start_price jiantou">
                        <span>{{ item.targetPrice }}</span>
                      </div>
                      <div class="new_price">
                        <span>{{ item.nowPrice }}</span>
                      </div>
                    </div>
                    <div class="bottom_price_title">
                      <div class="start_price">
                        <span>{{ $t('hj125') }}</span>
                      </div>
                      <div class="new_price">
                        <span>{{ $t('hj120') }}</span>
                      </div>
                    </div>
                  </div> -->
                  <div class="cichang" v-for="(item,index) in tabsOrderList" :key="item.id">
          <div class="dingbu">
            <div class="dl">
              <h6>{{ item.stockName ? item.stockName : item.indexName }}</h6>
              <p>
                <span v-show="(item.stockId.indexOf('sz')>=0)">深</span>
                <span class="sh" v-show="(item.stockId.indexOf('sh')>=0)">沪</span>
                <span class="bj" v-show="(item.stockId.indexOf('bj')>=0)">北</span>
                <a class="">{{ item.stockId }}</a>
              </p>
            </div>
            <div class="dr"  @click="gdClose(item)" v-if="item.status == 1"> 撤销</div>
            <div style="color:red"   v-if="item.status == 2"> 已撤销</div>
            <div style="color:green"   v-if="item.status == 3"> 已成交</div>

          </div>
          <div class="fudo" >
            <h6> 最新 <span class="red">{{ item.nowPrice }}</span></h6>
            <p>{{ item.addTime | gettime }}</p>
          </div>
          <div class="plkm">
            <p><span>委托价格</span><a class="red">{{ item.targetPrice }}/股</a></p>
            <p><span>委托数量</span><a class="red">{{ item.buyOldNum==null?item.buyNum:item.buyOldNum }}</a></p>

          </div>
          <div class="plkm">
            <p><span>委托金额</span><a class="red">{{ (item.targetPrice*item.buyNum).toFixed(2) }}</a></p>
            <p v-if="item.status == 3"><span>成交数量</span><a class="red">{{ item.buyNum }}</a></p>
          </div>
        </div>
              </van-list>
      <!-- 平仓 -->
      <van-list v-model="loadings" :finished="finisheds" :finished-text="$t('hj43')" @load="onLoads"
                :immediate-check="immediate" v-show="(chicangidx === 2)">
        <div class="cichang" v-for="(item,index) in tabsPcArr" :key="item.id">
          <div class="dingbu">
            <div class="dl">
              <h6>{{ item.stockName ? item.stockName : item.indexName }}</h6>
              <p>
                <span v-show="(item.stockGid.indexOf('sz')>=0)">深</span>
                <span class="sh" v-show="(item.stockGid.indexOf('sh')>=0)">沪</span>
                <span class="bj" v-show="(item.stockGid.indexOf('bj')>=0)">北</span>
                <a class="">{{ item.stockGid }}</a>
              </p>
            </div>
            <div class="dr" v-if="chicangidx == 0"> 平仓</div>
          </div>
          <div class="fudo" v-if="chicangidx == 0">
            <h6> 最新 <span class="red">{{ item.now_price }}</span></h6>
            <p>{{ item.buyOrderTime | gettime }}</p>
          </div>
          <div class="fudo" v-else>
            <h6> 卖出时间 </h6>
            <p>{{ item.sellOrderTime | gettime }}</p>
          </div>
          <div class="fudong redbg">
            <div class="kuij">
              <p><span>浮动盈亏：</span><a class="red">{{ item.profitAndLose }}</a></p>
              <p><span>总盈亏：</span><a class="red">{{ item.allProfitAndLose }}</a></p>
            </div>
          </div>
          <div class="plkm">
            <p><span>买入价格</span><a class="red">{{ item.buyOrderPrice }}/股</a></p>
            <p><span>数量</span><a class="red">{{ item.orderNum }}</a></p>
            <p><span>买入手续费</span><a class="red">{{ item.orderFee }}</a></p>
            <p><span>市值</span><a class="red">{{ item.orderTotalPrice }}</a></p>
            <p><span>印花税</span><a class="red">{{item.orderSpread}}</a></p>
            <p v-if="chicangidx == 1"><span>卖出价格</span><a class="red">{{ item.sellOrderPrice }}/股</a></p>
            <p v-if="chicangidx == 1"><span>留仓费</span><a class="red">{{ item.orderStayFee }}</a></p>
          </div>
        </div>
      </van-list>

    </div>
    <div style="height:2rem">

    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
import { MessageBox } from 'mint-ui'
import * as api from '@/axios/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      headertab: 0,
      chicangList: [
        {
          name: '我的持仓'
        },
        {
          name: '我的委托'
        },
        {
          name: '我的平仓'
        }
      ],
      chicangidx: 0,
      loading: false,
      loadings: false,
      finished: false,
      finisheds: false,
      page: 1,
      pages: 1,
      immediate: false,
      tabsPositionNumArr: [],
      tabsPcArr: [],
      loadingss: false,
      finishedss: false,
      tabsOrderList: []
    }
  },
  created () {
    const index = this.$route.query.chicangidx
    this.chicangidx = index !== undefined ? parseInt(index) : 0
    setInterval(() => {
      this.getorderList()
    }, 3000)
  },
  watch: {
    chicangidx (val) {
      if (val === 0) {
        if (this.tabsPositionNumArr.length === 0) {
          this.getListDetail()
        }
      } else if (val === 2) {
        if (this.tabsPcArr.length === 0) {
          this.getListDetails()
        }
      }
    }
  },
  mounted () {
    this.getUserInfo()
    if (this.chicangidx === 0) {
      this.getListDetail()
    } else if (this.chicangidx === 1) {
      // this.getListDetails();
    }
    this.getorderList()
  },
  methods: {

    async gdClose (item) {
      let opts = {
        id: item.id,
        oldPwd: this.oldPassword
      }
      let data = await api.delGuaDan(opts)
      // if (data.status == 1) {
      // this.getOrderList()
      // }
    },
    // 挂单
    async getorderList () {
      let opts = {type: this.notionType}
      let data = await api.getorderList(opts)
      this.loadingss = false
      if (data.status === 0) {
        // data.data.forEach(element => {
        //   this.tabsOrderList.push(element)
        // })
        this.tabsOrderList = data.data
        this.totalss = data.data.length
        this.finishedss = true // 只有一页，所以锁住翻页。有需要刷新数据的时候在调用方法前重新解锁
      } else {
        // Toast(data.msg)
      }
    },
    onLoad () {
      // 持仓
      this.page++
      switch (this.chicangidx) {
        case 0:
          // 沪深京持仓
          this.getListDetail()
          break
        case 1:
          // 指数持仓
          //   this.getzhishuListDetail();
          break

        default:
          break
      }
    },
    getsearch () {
      this.$router.push({
        path: '/Searchlist'
      })
    },
    onLoads () {
      // 平仓
      this.pages++
      // 沪深京平仓
      this.getListDetails()
    },
    getpingcang (val) {
      // if (!this.$store.state.userInfo.idCard) {
      //     Toast(this.$t('hj138'))
      //     this.$router.push('/authentications')
      //     return
      // }
      if (this.chicangidx == 0) {
        // 沪深京
        MessageBox.confirm(this.$t('hj139') + '?', this.$t('hj165'), {
          confirmButtonText: this.$t('hj161'),
          cancelButtonText: this.$t('hj106')
        }).then(async () => {
          let opt = {
            positionSn: val
          }
          let data = await api.sell(opt)
          if (data.status === 0) {
            Toast(data.msg)
            // 沪深京持仓
            this.finished = false
            this.getListDetail()
            this.tabsPositionNumArr = []
            // 沪深京平仓
            this.finisheds = false
            this.tabsPcArr = []
            this.getListDetails()
          } else if (data.msg.indexOf('不在交易时段内') > -1) {
            Toast(this.$t('hj140'))
          } else {
            Toast(data.msg)
          }
        }).catch(() => {

        })
      }
    },
    async getListDzetails () {
      // 获取沪深我的平仓列表
      this.loadings = true
      let opt = {
        state: 1,
        stockCode: '', // 代码
        stockSpell: '', // 简拼
        pageNum: this.pages,
        pageSize: 15
      }
      let data = await api.getOrderList(opt)
      this.loadings = false
      if (data.status === 0) {
        if (data.data.list.length < 15) {
          this.finisheds = true
        }
        data.data.list.forEach(element => {
          this.tabsPcArr.push(element)
        })
        this.totals = data.data.total
      } else {
        Toast(data.msg)
      }
    },
    async getListDetail () {
      // 获取沪深我的持仓列表
      this.loading = true
      let opt = {
        state: 0,
        stockCode: '', // 代码
        stockSpell: '', // 简拼
        pageNum: this.page,
        pageSize: 15
      }
      let data = await api.getOrderList(opt)
      this.loading = false
      if (data.status === 0) {
        if (data.data.list.length < 15) {
          this.finished = true
        }
        data.data.list.forEach(element => {
          this.tabsPositionNumArr.push(element)
        })
        // this.total = data.data.total
      } else {
        Toast(data.msg)
      }
    },
    async getListDetails () {
      // 获取沪深我的平仓列表
      this.loadings = true
      let opt = {
        state: 1,
        stockCode: '', // 代码
        stockSpell: '', // 简拼
        pageNum: this.pages,
        pageSize: 15
      }

      let data = await api.getOrderList(opt)
      this.loadings = false

      if (data.status === 0) {
        if (data.data.list.length < 15) {
          this.finisheds = true
        }

        // 排序数据
        let sortedList = data.data.list.sort((a, b) => {
          // 确保 sellOrderTime 是可以比较的日期格式
          return new Date(b.sellOrderTime) - new Date(a.sellOrderTime)
        })

        // 将排序后的数据添加到 tabsPcArr
        this.tabsPcArr = [...this.tabsPcArr, ...sortedList]

        this.totals = data.data.total
      } else {
        Toast(data.msg)
      }
    },
    async getSettingInfo () {
      let data = await api.getSetting()
      if (data.status === 0) {
        // 成功
        this.settingInfo = data.data
      } else {
        Toast(data.msg)
      }
    },
    async getUserInfo () {
      // 获取用户信息
      let data = await api.getUserInfo()
      if (data.status === 0) {
        this.$store.state.userInfo = data.data
      } else {
        Toast(data.msg)
      }
      this.$store.state.user = this.user
    }
  },
  filters: {
    gettime (time) {
      if (!time) {
        return ''
      }
      var nd = new Date(time)
      var y = nd.getFullYear()
      var mm = nd.getMonth() + 1
      var d = nd.getDate()
      var h = nd.getHours()
      var m = nd.getMinutes()
      var c = nd.getSeconds()
      if (mm < 10) {
        mm = '0' + mm
      }
      if (d < 10) {
        d = '0' + d
      }
      if (h < 10) {
        h = '0' + h
      }
      if (m < 10) {
        m = '0' + m
      }
      if (c < 10) {
        c = '0' + c
      }
      // 17:35:2922-06-2022
      return y + '-' + mm + '-' + d + ' ' + h + ':' + m + ':' + c
    }
  }
}
</script>

<style lang="less" scoped>

.red {
  color: #d73d3d !important;
}

.green {
  color: #20b844 !important;
}

.redbg {
  background: rgba(115, 131, 251, 0.3) !important;
}

.greenbg {
  background: #dcf7ee !important;
}

.chicangcontainer {
}

.toubu {
  width: 100%;
  height: 1.60rem;
  background: #F0F0F0;
  display: flex;
  justify-content: space-between;

  .tr {
    width: 0.43rem;
    height: 0.43rem;
    background: url(~@/assets/imgRed/img_search_normal2_dark.png) no-repeat 50%;
    background-size: 100%;
    margin-right: 0.40rem;
    margin-top: 0.32rem;
  }
}

.dabokl {
  width: 100%;
  min-height: 1.07rem;
  border-radius: 0.4rem 0.4rem 0 0;
  margin-top: -0.4rem;
  background: #F0F0F0;

  .sert {
    width: 5.34rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    position: relative;
    height: 1.07rem;

    span {
      text-align: center;
      color: #666;
      font-size: .4rem;
      font-weight: 550;
      line-height: 1.07rem;
    }

    .sdpl {
      // color: #5d7dfb;
      color: #ff5353;
    }

    a {
      width: 0.53rem;
      height: 0.11rem;
      // background: #5d7dfb;
      background: #ff5353;
      border-radius: 0.05rem;
      position: absolute;
      bottom: 0;
      margin-left: -0.266rem;
      transition: all .5s;
    }
  }

  .bnm {
    height: 0.03rem;
    width: 100%;
    background: #e0e0e0;
  }
}

.chicanglistmain {
  .cichang {
    width: 100%;
    border-bottom: 1px solid #e0e0e0;
    padding: 0.4rem 0;

    .dingbu {
      width: 9.35rem;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;

      .dl {
        h6 {
          color: #333;
          font-size: .4rem;
          font-weight: 500;
        }

        p {
          color: #333;
          font-size: .32rem;
          margin-top: 0.13rem;

          span {
            width: 0.4rem;
            height: 0.4rem;
            background: #3b4fde;
            border-radius: 0.05rem;
            text-align: center;
            line-height: .4rem;
            color: #fff;
            font-size: .3rem;
            display: inline-block;
          }

          a {
            display: inline-block;
            height: 0.4rem;
            line-height: .4rem;
            padding: 0 0.11rem;
            background: rgba(59, 79, 222, .1);
            border-radius: 0.05rem;
            color: #3b4fde;
            font-size: .32rem;
            vertical-align: middle;
          }

          .bj {
            background: #ea6248;
          }

          .sh {
            background: #aa3bde;
          }

          .shbg {
            color: #aa3bde;
            background: rgba(170, 59, 222, .1);
          }

          .bjbg {
            color: #ea6248;
            background: rgba(234, 98, 72, .1);
          }
        }
      }

      .dr {
        width: 1.6rem;
        height: 0.67rem;
        background: linear-gradient(-55deg, #4d7aff, #6f7fff);
        border-radius: 0.35rem;
        margin-top: 0.13rem;
        text-align: center;
        color: #fff;
        font-size: .32rem;
        line-height: .67rem;
      }
    }

    .fudo {
      width: 9.35rem;
      margin: 0 auto;
      margin-top: 0.4rem;
      display: flex;
      justify-content: space-between;

      h6 {
        color: #333;
        font-size: .37rem;

        span {
          font-weight: 600;
        }
      }

      p {
        color: #666;
        font-size: .32rem;
      }
    }

    .fudong {
      width: 100%;
      height: 0.8rem;
      margin: 0 auto;
      margin-top: 0.4rem;

      .kuij {
        width: 9.35rem;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;

        p {
          width: 47%;
          line-height: .8rem;
          display: flex;
          justify-content: space-between;

          span {
            color: #666;
            font-size: .32rem;
          }

          a {
            font-size: .32rem;
          }
        }
      }
    }

    .plkm {
      display: flex;
      justify-content: space-between;
      width: 9.35rem;
      margin: 0 auto;
      flex-wrap: wrap;

      p {
        width: 47%;
        margin-top: 0.4rem;
        display: flex;
        justify-content: space-between;

        span {
          color: #666;
          font-size: .32rem;
        }

        a {
          font-size: .32rem;
        }
      }
    }
  }
}

</style>
